<template>
  <div>
    <div>
      <el-descriptions
          title="光功率信息"
          :column="2"
          border
          style="width: 450px"
      >
        <template slot="extra">
          <el-button type="primary" size="small">刷新</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            输入光功率
          </template>
          {{ opticalPowerPac.inputPower }}&nbsp;<i>dBm</i>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            输出光功率
          </template>
          {{ opticalPowerPac.outputPower }}&nbsp;<i>dBm</i>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            过高门限
          </template>
          {{ opticalPowerPac.inputPowerUpperThreshold }}&nbsp;<i>dBm</i>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i></i>
            过低门限
          </template>
          {{ opticalPowerPac.inputPowerLowerThreshold }}&nbsp;<i>dBm</i>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-tabs :active-name="activeName" v-show="false">
      <el-tab-pane label="方式1" name="1">
        <div class="config_div">
          <el-header style="background-color: #ffff00">光功率</el-header>
          <el-form
            :model="opticalPowerPac"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="config_form"
          >
            <el-form-item label="输入光功率" prop="name">
              <el-input v-model="opticalPowerPac.inputPower" readonly>
                <i slot="suffix" style="margin-right: 10px">dBm</i>
              </el-input>
            </el-form-item>
            <el-form-item label="输出光功率" prop="source">
              <el-input v-model="opticalPowerPac.outputPower" readonly>
                <i slot="suffix" style="margin-right: 10px">dBm</i>
              </el-input>
            </el-form-item>
            <el-form-item label="过高门限" prop="source">
              <el-input
                v-model="opticalPowerPac.inputPowerUpperThreshold"
                readonly
              >
                <i slot="suffix" style="margin-right: 10px">dBm</i>
              </el-input>
            </el-form-item>
            <el-form-item label="过低门限" prop="source">
              <el-input
                v-model="opticalPowerPac.inputPowerLowerThreshold"
                readonly
              >
                <i slot="suffix" style="margin-right: 10px">dBm</i>
              </el-input>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button @click="resetForm('pgForm')" type="success" size="small">刷新</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="方式2" name="2">
        <div>
          <el-descriptions
            title="光功率信息"
            :column="1"
            border
            style="width: 450px"
          >
            <template slot="extra">
              <el-button type="primary" size="small">刷新</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i></i>
                输入光功率
              </template>
              {{ opticalPowerPac.inputPower }}&nbsp;<i>dBm</i>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i></i>
                输出光功率
              </template>
              {{ opticalPowerPac.outputPower }}&nbsp;<i>dBm</i>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i></i>
                过高门限
              </template>
              {{ opticalPowerPac.inputPowerUpperThreshold }}&nbsp;<i>dBm</i>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i></i>
                过低门限
              </template>
              {{ opticalPowerPac.inputPowerLowerThreshold }}&nbsp;<i>dBm</i>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "OptPower",
  data() {
    return {
      activeName:"2",
      opticalPowerPac: {
        inputPower: "300",
        outputPower: "200",
        inputPowerUpperThreshold: "280",
        inputPowerLowerThreshold: "30",
      },
    };
  },
};
</script>

<style scoped>
</style>